<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot+SpringDataJPA+Thymeleaf模板+WebJars+BS完成学生管理系统</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
        .container{
            margin-top: 20px;
        }
        .panel-footer{
            padding:0;
            padding-right: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                <h3>SpringBoot+SpringDataJPA+Thymeleaf模板+WebJars+BS完成学生管理系统</h3>
            </h3>
        </div>
        <table class="table table-hover table-striped">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>所在班级</td>
                <td>操作</td>
            </tr>

            <tr th:each="stud : ${pr.rows}">
                <td th:text="${stud.sid}"></td>
                <td th:text="${stud.sname}"></td>
                <td th:text="${stud.sex}"></td>
                <td th:text="${stud.age}"></td>
                <td th:text="${stud.addr}"></td>
                <td th:text="${stud.cname}"></td>
                <td>
                    <!--此种方式可以将对象字符串一次性传入到js中-->
                    <a href="#" class="btn btn-success btn-sm" th:onclick="editUI('[[${stud}]]')">修改</a>
                    <!--下面这种传值方式只能一次传一个值-->
                    <!-- <a href="#" class="btn btn-success btn-sm" th:onclick="|editUI(${stud.sid},'${stud.sname}')|">修改</a>-->
                    <a th:href="'/student/delete/'+${stud.sid}" onclick="return confirm('是否真的要删除学生?')" class="btn btn-danger btn-sm">删除</a>
                </td>
            </tr>
        </table>
        <div class="panel-footer text-right">
            <!-- 条件查询表单-->
            <form class="form-inline" action="/student/search" id="form1" method="post" style="float:left;margin-left: 10px;margin-top: 20px;">
                <input type="hidden" id="page" name="page" value="1">
                <input type="hidden" id="pagesize" name="pagesize" value="5">
                <div class="form-group">
                    <input type="text" name="sname" class="form-control" th:value="${vo?.sname}" placeholder="学生姓名">
                </div>
                <div class="form-group">
                    <input type="text" name="addr" class="form-control"  th:value="${vo?.addr}" placeholder="学生住址">
                </div>
                <div class="form-group">
                    <select class="form-control" name="cid">
                        <option value="0">所有班级</option>
                        <option th:each="c : ${classes}" th:selected="${c.cid==vo?.cid}" th:value="${c.cid}">[[${c.cname}]]</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-default">开始查询</button>
                <button type="button" class="btn btn-info" onclick="editUI()">添加学生</button>
            </form>
            <!-- 分页导航-->
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" aria-label="Next" >
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<!--添加修改的弹框-->
<div class="modal fade" id="myModal" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="title">添加学生</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" id="form2">
                    <input type="hidden" name="_method" id="_method" value="post">
                    <input type="hidden" name="sid" id="sid">
                    <div class="form-group">
                        <label  class="col-sm-3 control-label">学生姓名：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="sname" name="sname" placeholder="学生姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-3 control-label">学生性别：</label>
                        <div class="col-sm-9">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sex" id="sex1" value="男">男
                                </label>
                                <label>
                                    <input type="radio" name="sex" id="sex2" value="女">女
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-3 control-label">学生年龄：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="age" name="age" placeholder="学生年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-3 control-label">学生住址：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="addr" name="addr" placeholder="学生住址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-3 control-label">所在班级：</label>
                        <div class="col-sm-9">
                            <select class="form-control" name="cid" id="cid">
                                <option th:each="c : ${classes}" th:selected="${c.cid==vo?.cid}" th:value="${c.cid}">[[${c.cname}]]</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭(C)</button>
                <button type="button" class="btn btn-primary" onclick="save()">保存(S)</button>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    $(function(){
        //调用生成分页导航方法
        createPageNav();
    })
    //生成分页导航
    function createPageNav(){
        //得到总页数
        let totalPage = [[${pr.totalPage}]]
        //得到当前页
        let page = [[${page}]];
        //定义生成的导航的字符串
        let str = "";
        // 遍历总页数生成分页导航
        for (let i = 1; i <= totalPage; i++) {
            let cls = i == page ? 'active':'';
            str += "<li class="+cls+">";
            // str += "<a  onclick=skipPage('"+i+"')>" + i + "</a>"
            str += `<a onclick='skipPage(${i})'>${i}</a>`
            str += "</li>"
        }
        console.log(str)
        //将字符串设置给分页导航条
        $(".pagination li").first().after(str)
    }

    //点击超链接提交表单
    function skipPage(page) {
        //为隐藏的表单赋值
        $("#page").val(page);
        //提交表单
        $("#form1")[0].submit();
    }

    //添加或修改学生
    function editUI(stud){
        let url = null;
        //判断当前是否有学生对象作不同的处理
        if(stud){//有对象是修改
            stud = JSON.parse(stud);            // 转换为json对象
            $("#sid").val(stud.sid);            // 为表单隐藏域赋值
            //修改表单的url地址
            url = "/student/update";
            //为_method参数设置值
            $("#_method").val("put");
            //修改标题
            $("#title").text("修改学生");
            //为表单控件赋值
            $("#sname").val(stud.sname);
            $("#age").val(stud.age);
            $("#addr").val(stud.addr);
            $("#cid").val(stud.cid);
            $("#sex1").prop("checked",stud.sex == "男" ? "checked": "");
            $("#sex2").prop("checked",stud.sex == "女" ? "checked": "");
        }else{//没对象是添加
            //清空表单数据
            $("#form2")[0].reset();
            $("#sid").val("")
            //修改表单的url地址
            url = "/student/add";
            //为_method参数设置值
            $("#_method").val("post");
            //修改标题
            $("#title").text("添加学生");
        }
        //为表单form2的action设置值
        $("#form2")[0].action = url;
        //打开对话框
        $("#myModal").modal("show");
    }

    // 保存学生
    function save() {
        $("#form2")[0].submit();
    }
</script>

</html>
